import { useUpdate } from "ahooks";
import { Spin } from "antd";
import clsx from "clsx";
import { Suspense, useEffect } from "react";
import FormSkeleton from "../components/FormSkeleton";
import Header from "../components/Header";
import eventBus, { useSubscribe } from "../framework/common/eventBus";
import useScreenLock from "../framework/common/lifecycle/useScreenLock";
import { getQuery } from "../framework/common/utils";
import RuntimeForm from "../RuntimeForm";
import ApproveStepPrint from "../RuntimeForm/ApproveStep/ApproveStepPrint";
import "./index.css";

export default function ({ mode, data }) {
  let tplData = data.data.tplData;
  let params = data.data.params;
  const query= getQuery() ||{}
  let update = useUpdate();
  //刷新打印页面状态
  useSubscribe("updatePrintView.update",()=>{
    update();
  },[])
  //历史问题，后端导出PDF是通过判断流程标题为success的时候来确定前端是否完全渲染完毕
  useSubscribe("pageReady", () => {
    document.title = "success";
  });
  if(query.print_html_to_pdf){
    document.body.classList.add("exportPDF")
  }
  useEffect(() => {

    setTimeout(() => {
      
      if(query.print_html_to_pdf){
        eventBus.publishAsync("pageReady");
      }
    }, 100);
  }, []);

  return (
    <>
      <Header mode={mode} data={data}></Header>
      <div des="打印最外层" className={clsx("w-full main-content relative bg-gray-90 isPrint",query.print_html_to_pdf&&"exportPDF")}>
        <div className={clsx("pb-2 runtime-form relative w-1100px mx-auto my-0 pt-10 overflow-hidden transition-all duration-300 bg-white px-[40px]")}>
          <Suspense fallback={null}>
            <RuntimeForm></RuntimeForm>
          </Suspense>

          <ApproveStepPrint des="流程图打印模式" approveSteps={tplData?.ApproveSteps} tplData={tplData} params={params} model={"readonly"} />
        </div>
      </div>
      <div className="frontend-exportPDF relative runtime-form bg-white w-[792px] px-5" id="js-exportPDF"></div>
    </>
  );
}
